
import * as echarts from "echarts";
import { useEffect,useRef } from "react";

//封装一个柱状图组件
const BarChart = ({title}) => { 
    const charRef = useRef(null);
    useEffect(() => {
    //const chartDom = document.getElementById("main");
    const chartDom = charRef.current;
    const myChart = echarts.init(chartDom);
    var option;

    option = {
        title:{
            text:title
        },
      xAxis: {
        type: "category",
        data: ["vue","react","Angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [10,40,70],
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
  }, [title]);
  return (
    <div ref={charRef} style={{ width: "600px", height: "400px" }}></div>
  );
  
};
export default BarChart;